<template>
	<view class="index home-bg img-main">
		<!-- #ifdef H5 -->
		<download-nav v-if="isShowDownload"></download-nav>
		<!-- #endif -->
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
			<u-navbar :border-bottom="false" :is-fixed="false" custom-class="home-bg" :background="navBackground" :is-back="false">
				<view style="display: flex; justify-content: space-between; width: 100%; align-items: center">
					<h3>鼎顶</h3>
					<view class="user-opt" style="margin-right: 30rpx" @tap="goPage('/bundle/pages/message_center/message_center')">
						<!-- <view class="dot row-center" v-if="userInfo.notice_num"></view> -->
						<image style="width: 58rpx; height: 58rpx" src="/static/images/icon_my_news.png"></image>
					</view>
				</view>
			</u-navbar>
		</u-sticky>

		<view class="Search-u">
			<Search pageTitle="搜索" placeholder="搜索商品店铺名称" color="#F05A39" @search="searchStore" @clear="clear"></Search>
		</view>

		<!-- 轮播图 -->
		<view class="list-swiper">
			<u-swiper height="296" :list="list3" indicatorMode="line" circular></u-swiper>
		</view>

		<view class="contain">
			<view class="main">
				<!-- 导航入口 -->
				<view class="nav bg-white" v-if="navList.length">
					<swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
						<swiper-item v-for="(items, index) in navList" :key="index">
							<view class="nav-list row wrap">
								<view v-for="(item, index2) in items" :key="index2" @tap="tapMenu()" class="nav-item column-center">
									<image class="nav-icon" :src="item.image"></image>
									<view class="name xs">{{ item.name }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="dots" v-if="navList.length > 1">
						<view v-for="(item, index) in navList" :key="index" :class="'dot ' + (index == currentSwiper ? 'active' : '')"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 热销 -->
		<view class="hot mt20 bottom-color" v-if="hotGoods.length && seting.hots">
			<view class="title flex1 disp">
				<image class="title-image" src="/static/images/hot_title.png" style="width: 134rpx; height: 46rpx"></image>
				<span>开心购物·尽在优选</span>
			</view>

			<view v-for="(item, index) in hotGoods">
				<view class="hotGoods">
					<view style="display: flex">
						<image src="/static/main/cs3.jpg" mode="aspectFill"></image>
						<view class="right">
							<view>
								<text class="right-top">超市购物看</text>
								<view style="margin-top: 10rpx">
									<u-rate :value="3.7" disabled></u-rate>
								</view>
							</view>
							<view class="right-bottom">
								<text>
									87
									<span>￥</span>
								</text>
								<view class="right-time"><span>02:15:24</span></view>
							</view>
						</view>
					</view>
					<button>购买</button>
				</view>
			</view>
		</view>

		<!-- #ifdef APP-PLUS -->
		<lyg-popup
			v-if="appConfig.app_agreement"
			title="用户使用及隐私保护政策提示"
			protocolPath="/bundle/pages/server_explan/server_explan?type=0"
			policyPath="/bundle/pages/server_explan/server_explan?type=1"
			policyStorageKey="has_read_privacy"
		></lyg-popup>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- 用户隐私协议弹框 -->
		<privacy-popup v-model="showPrivacyPopup"></privacy-popup>
		<!-- #endif -->

		<!-- 无网络提示 -->
		<u-no-network z-index="1200" @retry="handleRetry"></u-no-network>

		<u-back-top
			:scroll-top="scrollTop"
			:top="1000"
			:customStyle="{
				backgroundColor: '#FFF',
				color: '#000',
				boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
			}"
		></u-back-top>
	</view>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex';
// import { getHome, getMenu, getBestList } from '@/api/store';
import { loadingType } from '@/utils/type';
import { loadingFun, menuJump, arraySlice, setTabbar, getRect, trottle } from '@/utils/tools';
import { toLogin } from '@/utils/login';
import Cache from '@/utils/cache';
// import { getConfig, userShare, getRegisterCoupon } from '@/api/app';
import Search from '@/components/you-search/index.vue';
const app = getApp();
export default {
	components: {
		Search
	},
	data() {
		return {
			list3: ['/static/main/cs1.jpg', '/static/main/cs12jpg', '/static/main/cs3.jpg', '/static/main/cs4.jpg'],
			scrollTop: 0,
			navSwiperH: 374,
			logo: '',
			navHeight: 0,
			currentSwiper: 0,
			page: 1,
			status: loadingType.LOADING,
			remainTime: '',
			navBg: 0,
			navList: [
				[
					{
						name: '生活旅游',
						image: '/static/main/Frame11.png'
					},
					{
						name: '饮食饮料',
						image: '/static/main/Frame12.png'
					},
					{
						name: '家居厨具',
						image: '/static/main/Frame13.png'
					},
					{
						name: '全部分类',
						image: '/static/main/Frame14.png'
					},
					{
						name: '个护清洁',
						image: '/static/main/Frame15.png'
					},
					{
						name: '骑行运动',
						image: '/static/main/Frame16.png'
					},
					{
						name: '珠宝配饰',
						image: '/static/main/Frame17.png'
					},
					{
						name: '服饰内衣',
						image: '/static/main/Frame18.png'
					}
				]
			],
			news: [],
			goodsList: [],
			seckill: {},
			seckillGoods: [],
			hotGoods: [],
			newGoods: [],
			activityArea: [],
			showCoupop: false,
			couponPopList: [],
			coupon: [],
			isDischarge: true,
			enable: true,
			isShowDownload: false,
			showPrivacyPopup: false //微信用户隐私协议
		};
	},
	async onLoad(options) {
		// #ifdef MP-WEIXIN
		if (wx.getPrivacySetting) {
			wx.getPrivacySetting({
				success: (res) => {
					console.log(res, '------'); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					if (res.needAuthorization) {
						// 需要弹出隐私协议
						setTimeout(() => {
							uni.hideTabBar();
						}, 100);
						this.showPrivacyPopup = true;
					} else {
						uni.showTabBar();
					}
				},
				fail: (err) => {
					uni.showTabBar();
					console.log(err);
				}
			});
		} else {
			uni.showTabBar();
		}

		// #endif

		this.headerAction = wx.createAnimation({
			delay: 0,
			duration: 100,
			timingFunction: 'ease-in-out'
		});
		this.onPageScroll = trottle(this.onPageScroll, 500, this);
		setTabbar();
		this.navHeight = app.globalData.navHeight;
		this.isDischarge = false;
		await this.getMenuFun();
		this.getBestListFun();
		console.log(this.appConfig);
		// #ifdef H5
		if (options && options.isapp == 1) {
			this.isShowDownload = true;
		}
		// #endif
	},
	async onShow() {
		this.$nextTick(function () {
			getRect('.index').then((res) => {
				if (res.top == 0) {
					this.navBg = 0;
				}
			});
		});

		// #ifdef H5
		this.enable = true;
		// #endif
		await this.getHomeFun();
		this.getCartNum();
		this.isLogin && this.getRegisterCouponFun();

		// #ifdef MP
		wx.getUpdateManager().onUpdateReady(function () {
			wx.showModal({
				title: '更新提示',
				content: '新版本已经准备好，是否重启应用？',
				success(res) {
					if (res.confirm) {
						// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
						wx.getUpdateManager().applyUpdate();
					}
				}
			});
		});
		// #endif
	},
	onHide() {
		// #ifdef H5
		this.enable = false;
		// #endif
	},
	onReachBottom() {
		this.getBestListFun();
	},
	onPullDownRefresh() {
		this.getHomeFun();
		this.getMenuFun();
	},
	onShareAppMessage() {
		console.log(this.inviteCode);
		const shareInfo = Cache.get('shareInfo');
		return {
			title: shareInfo.mnp_share_title,
			path: 'pages/index/index?invite_code=' + this.inviteCode,
			imageUrl: shareInfo.mnp_share_image
		};
	},
	onPageScroll(e) {
		const top = uni.upx2px(100);
		const { scrollTop } = e;
		if (!this.enable) return;
		let percent = scrollTop / top;
		this.navBg = percent > 1 ? 1 : percent;
		this.scrollTop = scrollTop;
	},
	destroyed() {
		this.isDischarge = true;
	},
	methods: {
		...mapMutations(['SETCONFIG']),
		...mapActions(['getCartNum', 'getUser']),
		// 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
		async handleRetry() {
			console.log('网络重试刷');
			try {
				const { code, data } = await getConfig();
				if (code == 1) {
					this.SETCONFIG(data);
					setTabbar();
				}
			} catch (e) {
				uni.showTabBar();
			}
			this.getShareInfo();
			this.getUser();
		},
		async getShareInfo() {
			const { code, data } = await userShare();
			if (code == 1) {
				Cache.set('shareInfo', data);
			}
		},
		async getHomeFun() {
			const { code, data } = await getHome();
			uni.stopPullDownRefresh();
			if (code == 1) {
				const { coupon, news, seckill, host_goods, shop_logo, new_goods, activity_area } = data;
				this.remainTime = Math.abs(seckill.end_time - Date.parse(new Date()) / 1000);
				this.logo = shop_logo;
				this.news = news;
				this.seckillGoods = seckill.goods;
				this.seckill = seckill;
				this.hotGoods = host_goods;
				this.coupon = coupon;
				this.newGoods = new_goods;
				this.activityArea = activity_area;
			}
		},

		async getMenuFun() {
			// const { code, data } = await getMenu({
			// 	type: 1
			// });
			// uni.stopPullDownRefresh();
			// if (code == 1) {
			// 	//   截取数组
			// 	if (data.length <= 5) {
			// 		this.navSwiperH = 200;
			// 	} else {
			// 		this.navSwiperH = 374;
			// 	}
			// 	this.navList = arraySlice(data);
			// 	console.log(this.navList)
			// }
		},
		async getBestListFun() {
			let { page, goodsList, status } = this;
			const data = await loadingFun(getBestList, page, goodsList, status);
			if (!data) return;
			this.page = data.page;
			this.goodsList = data.dataList;
			this.status = data.status;
		},
		async tapMenu(item) {
			if (!this.isLogin) return toLogin();
			uni.navigateTo({
				url: '/pages/index/secondary/secondary'
			});
		},
		goPage(url) {
			if (!this.isLogin) return toLogin();
			uni.navigateTo({
				url
			});
		},
		swiperChange(e) {
			this.currentSwiper = e.detail.current;
		},
		getRegisterCouponFun() {
			getRegisterCoupon().then((res) => {
				if (res.code == 1) {
					if (res.data && res.data.length) {
						this.showCoupop = true;
					}
					this.couponPopList = res.data;
				}
			});
		}
	},
	computed: {
		...mapGetters(['cartNum', 'inviteCode', 'appConfig']),
		navBackground() {
			return this.seting.top_bg_image
				? {
						background: '../../static/main/Frame1.png no-repeat',
						'background-size': '100% auto'
				  }
				: {};
		},
		showLogo() {
			return this.seting.logo;
		},
		navSearch() {
			if (this.showLogo === 0) return true;

			return this.navBg < 1 ? false : true;
		},
		seting() {
			const { index_setting } = this.appConfig;
			return index_setting;
		}
	}
};
</script>

<style lang="scss" scoped>
.img-main {
	background: url(../../static/main/Frame1.png) no-repeat;
	background-size: 100% auto;
}
.Search-u {
	margin: 30rpx 0;
}
.list-swiper {
	height: 296rpx;
	margin: 16rpx 0;
}
.bottom-color {
	background: linear-gradient(180deg, #ffe0d9 0%, rgba(255, 255, 255, 0.24) 26%, #ffffff 44%);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 20rpx 30rpx;
	.hotGoods {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0 35rpx 0;
		image {
			width: 240rpx;
			height: 149.29rpx;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			margin-right: 20rpx;
		}
		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 5rpx 0;
			.right-top {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}

			.right-bottom {
				display: flex;
				align-items: center;
				text {
					font-family: MiSans, MiSans;
					font-weight: 500;
					font-size: 30rpx;
					color: #f05a39;
					text-align: center;
					font-style: normal;
					text-transform: none;
					span {
						font-size: 23rpx;
					}
				}
				.right-time {
					margin-left: 15rpx;
					width: 150rpx;
					height: 35rpx;
					background: url(../../static/main/time.png) no-repeat;
					background-size: 144.71rpx 34rpx;
					display: flex;
					align-items: center;
					justify-content: end;
					span {
						display: block;
						margin-right: 20rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #ffffff;
					}
				}
			}
		}

		button {
			width: 110rpx;
			height: 62rpx;
			background: linear-gradient(269deg, #f26f43 0%, #f34836 100%);
			border-radius: 166rpx 166rpx 166rpx 166rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #ffffff;
		}
	}
	.disp {
		display: flex;
		align-items: center;
		span {
			margin-left: 20rpx;
			font-size: 20rpx;
			color: #f05a39;
		}
	}
}

.index {
	.live-play {
		position: fixed;
		z-index: 999;
		bottom: 200rpx;
		right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
		border: $-solid-border;
		border-radius: 50%;
		font-size: 32rpx;
		background-color: #ffffff;

		&__icon {
			animation: scale 0.5s infinite;
		}

		@keyframes scale {
			from {
				top: 0px;
				transform: scale(1);
			}
			to {
				transform: scale(1.2);
			}
		}
	}

	background-size: 100% auto;

	.logo-wrap {
		position: absolute;

		.logo {
			width: auto;
			height: 52rpx;
		}
	}

	.contain {
		margin-top: 30rpx;
		.main {
			position: relative;
			z-index: 9;
			padding: 0 20rpx;

			.nav {
				position: relative;
				border-radius: 14rpx;

				.nav-item {
					width: 25%;
					margin-top: 30rpx;

					.nav-icon {
						width: 84rpx;
						height: 84rpx;
						margin-bottom: 15rpx;
					}
				}

				.dots {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 20rpx;
					display: flex;

					.dot {
						width: 10rpx;
						height: 6rpx;
						border-radius: 6rpx;
						margin-right: 10rpx;
						background-color: rgba(255, 44, 60, 0.4);

						&.active {
							width: 20rpx;
							background-color: $-color-primary;
						}
					}
				}
			}

			.information {
				height: 76rpx;
				box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 14rpx;

				.news {
					position: relative;

					.shade {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 100;
					}
				}

				.icon-toutiao {
					width: 114rpx;
					height: 34rpx;
				}

				.gap-line {
					height: 28rpx;
					width: 1px;
					background-color: #dcdddc;
					margin: 0 30rpx;
				}
			}

			.seckill {
				.dec {
					background-color: #fffbdb;
					width: 150rpx;
				}
			}

			.hot,
			.new-goods {
				.title-image {
					width: 144rpx;
					height: 55rpx;
				}
			}
		}
	}
}
</style>
